<template>
  <div class="wrapper">
    <div class="box">
      <div class="video-wrap">
        <video-player :src="videoUrl" :close-switch="true" />
      </div>
      <div class="control-wrap">
        <div class="direct-wrap">
          <div
            v-for="d in [
              'LEFT_UP',
              'UP',
              'RIGHT_UP',
              'LEFT',
              'GOTO_PRESET',
              'RIGHT',
              'RIGHT_DOWN',
              'DOWN',
              'LEFT_DOWN'
            ]"
            :key="d"
            class="direct-btn"
            @click="handleControl(d)"
          ></div>
        </div>
        <div class="zoom-wrap">
          <div
            v-for="z in ['ZOOM_IN', 'ZOOM_OUT']"
            :key="z"
            class="zoom"
            :style="{
              background: `url(/img/river-lake-management/comprehensive-map/${z.toLowerCase()}.png) 100% no-repeat`
            }"
            @click="handleControl(z)"
          ></div>
        </div>
        <div class="slider-wrap">
          <el-slider
            v-model="speed"
            :min="1"
            :max="8"
            :marks="marks"
            :step="1"
          />
        </div>
      </div>
    </div>
    <div class="action">
      <div class="btn" @click="test">测试</div>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
console.log('当前系统时间：', dayjs().format('YYYY-MM-DD HH:mm:ss'))
import VideoPlayer from '@/components/008-video-player/index.vue'
export default {
  components: {
    VideoPlayer
  },
  props: {},
  data() {
    return {
      videoUrl:
        'https://aq.zhslapp.com:20103/live/cameraid/1000152%240/substream/1.m3u8',
      speed: 3,
      marks: {
        1: {
          style: {
            color: '#fff'
          },
          label: '1'
        },
        3: {
          style: {
            color: '#fff'
          },
          label: '3'
        },
        8: {
          style: {
            color: '#fff'
          },
          label: '8'
        }
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  activated() {},
  deactivated() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    handleControl() {},
    test() {}
  },
  filters: {}
}
</script>
<style scoped lang="scss">
@mixin oneline {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wrapper {
  height: 100%;
  position: relative;
  border: 1px solid #000;
  .box {
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;

    .video-wrap {
      height: 300px;
    }

    .control-wrap {
      width: 150px;
      height: 240px;
      background: rgba(5, 40, 98, 0.29);
      border: 1px solid #0696fc;
      border-radius: 5px;
      .direct-wrap {
        // border: 1px solid red;
        border-radius: 50%;
        // overflow: hidden;
        height: 140px;
        width: 140px;
        margin: 0 auto;
        margin-top: 10px;
        background-image: url(@/assets/images/river-lake-management/comprehensive-map/control.png);
        background-size: 100% 100%;
        cursor: pointer;
        display: flex;
        flex-wrap: wrap;
        .direct-btn {
          height: calc(100% / 3);
          width: calc(100% / 3);
          border: 1px solid yellow;
        }
      }
      .zoom-wrap {
        margin-top: 8px;
        width: 150px;
        // background: red;
        display: flex;
        justify-content: space-around;
        .zoom {
          height: 27px;
          width: 27px;
          cursor: pointer;
        }
      }
      .slider-wrap {
        padding: 0 10px;
      }
    }
  }
}
</style>
